<template>
	<section style="width: 1200px;margin: 0 auto;">
		<div class="tuzhi-content">
			<img src="../../../static/img/draw/lantu_01.jpg"/>
			<div class="table-content clearfix">
				<img src="../../../static/img/draw/shapanline_03.jpg"/>
				<div class="thinkscss fl">
					<table width="100%" class="table-content">
						<thead>
							<tr class="tr-first">
								<th>使用者 users</th>
								<th  colspan="2">前台管理front office</th>
								<th  colspan="2">后台管理back office</th>							
							</tr>
							<tr class="tr-second">
								<th>用户行为</br>axtivity</th>
								<th>接触点</br>touch point</th>
								<th>前端服务流程</br>fore-end</br>processes</th>
								<th>后端内部</br>服务流程</br>iniernal</br>processes</th>
								<th>后端外部</br>服务流程</br>external</br>processes</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for='el in content.Info'>
								<td><textarea  v-bind:readonly="use" v-model="el.axtivity" name="" rows="" cols=""></textarea></td>
								<td><textarea  v-bind:readonly="use" v-model="el.touchpoint" name="" rows="" cols=""></textarea></td>
								<td><textarea  v-bind:readonly="use" v-model="el.processes" name="" rows="" cols=""></textarea></td>
								<td><textarea  v-bind:readonly="use" v-model="el.iniernal" name="" rows="" cols=""></textarea></td>
								<td><textarea  v-bind:readonly="use" v-model="el.external" name="" rows="" cols=""></textarea></td>
							</tr>								
						</tbody>
					</table>
				</div>	
				<div class="gaijin-box">
					<table width="100%" class="table-content">
						<tr><th>需改进地方</br>to develop</th></tr>
						<tr v-for='el in content.develop'>
							<td><textarea name="" v-bind:readonly="use"  v-model="el.way" rows="" cols=""></textarea></td>
						</tr>						
					</table>
				</div>
			</div>
		</div>	
	</section>
</template>

<script>
	export default{
		data(){
			return{
				content:{
					Info:[
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					},
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					},
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					}				
					],
					develop:[
						{
							way:""
						},
						{
							way:""
						},
						{
							way:""
						}					
					]
				},
				use:false,
			}
		},
		methods:{
			
		},
		watch:{
			'tochild.content':function(){
				console.log(this.tochild.content)
				if(this.tochild.content){
					this.content=this.tochild.content;			
				}				
			}			
		},		
		created(){
			var _this=this;
			if(_this.tochild.use==false){
				_this.use=false
			}else{
				_this.use=true
			}				
		},		
		props:['tochild'],
		mounted(){
			if(this.tochild.content){
				this.content=this.tochild.content;
			}
		}
	}
</script>

<style scoped src='../../../static/css/all.css'>
</style>